<template>
    <el-container class="layout-container-demo" style="height: 100vh;padding: 0;">
      <el-container>
        <el-header style="text-align: right; font-size: 12px; background-color: black;height: 10vh;padding: 0 12vw;">
          <div class="toolbar">
            <!-- 左侧 -->
            <div style="display: flex; align-items: center;">
              <img style="height: 7vh;" src="../assets/image/ruibo-logo.png" alt="logo">
              <h2 style="font-size: 1.7rem;margin-left: 12px;">算法演示配置管理系统</h2>
            </div>
            <!-- 右边 -->
            <div style="display: flex; align-items: center;">
              <el-dropdown>
                <div>
              <el-avatar > User</el-avatar>
            </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  <el-dropdown-item @click="handleOpen('/changePassword')">修改密码</el-dropdown-item>
                  <el-dropdown-item @click="handleOpen('/')">算法视界</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div style="margin-left: 18px;font-size: 1rem;margin-right: 18px;">{{authStore.user?.username }}</div>
            </div>
          </div>
        </el-header>
        <el-main class="main">
          <div class="main-container">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer style="text-align: left;display: flex; align-items: center; font-size: 10px; background-color: black;height: 10vh;padding: 0 12%;">
          <h2 style="color: white;"> ©2025 众安睿博. All rights reserved.</h2>
        </el-footer>
      </el-container>
    </el-container>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useAuthStore } from '../stores/user';
  import request from '@/utils/request';
  import { useAlgorStore } from '@/stores/algorothm';
  import { ElMessage, ElMessageBox } from 'element-plus'
  const router = useRouter()
  const activeIndex = ref('/home')  // 默认选中首页
  const authStore = useAuthStore();//使用store仓库进行数据管理
  const algorStore = useAlgorStore();
  
  
  const handleOpen = (path: string) => {
    router.push(path)  // 跳转到对应的路由
    activeIndex.value = path  // 更新选中的菜单项
  }
  
  const handleLogout = () => {
    ElMessageBox.confirm(
    '是否退出登录',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 页面跳转
      authStore.logout(); // 调用退出登录逻辑
      router.push('/'); // 跳转到登录页面
    })
    .catch(() => {
    })
  };
  </script>
  
  <style scoped>
  .layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-8);
    color: var(--el-text-color-primary);
    padding: 0;
  }
  
  .layout-container-demo .el-menu {
    border-right: none;
  }
  .layout-container-demo .el-main {
    padding: 0;
  }
  .layout-container-demo .toolbar {
    display:flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    right: 20px;
    color: white;
  }
  .el-menu-item {
    width: 200px;
    background: var(--el-color-primary-light-8);
  }
  .main {
    background-color: #0c294c;
  }
  .main-container {
    margin: 0 12vw;
    height: 100%;
  }
  </style>
  